<template>
  <div class="m-3 p-0 m-0" style="background-color: #011130;">
    <div style="margin: 0px;padding: 0px;">
      <el-row class="m-0 p-0">
        <el-col class="col-12 text-center">
          <div class="m-0 p-0">
            <el-row
              class="m-0 p-0 d-flex flex-row"
              style="background:url(../../../static/image/portal/title.png) no-repeat -200px;height: 160px;"
            >
              <el-col class="col-10 m-0 p-0 text-center">
                <h1
                  style="margin-left:230px;font-family: PingFangSC-Medium;
                  font-size: 53px; color: #C9FBFE;letter-spacing: 2px;text-align: center;padding-top: 10px"
                >智慧社区</h1>
              </el-col>
              <el-col class="col-2 m-0 p-0">
                <el-menu
                  class="el-menu-demo"
                  mode="horizontal"
                  style="background-color: #011130;border: 0px;"
                >
                  <el-menu-item index="1">
                    <i>
                      <img src="../../../static/image/Login/user.png" width="30" />
                    </i>
                  </el-menu-item>
                  <el-submenu index="2">
                    <template slot="title">欢迎 {{user['username']}}</template>
                    <el-menu-item index="2-1" @click="loginout">退出</el-menu-item>
                  </el-submenu>
                </el-menu>
                <div class="line"></div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <el-row style="margin: 0px;padding: 0px;">
        <el-col
          class="col-12 text-left"
          style="font-family: PingFangSC-Medium;font-size: 24px;color: rgba(233,233,233,1);height: 40px; margin-left: 30px;margin-top: -50px;"
        >行政区划</el-col>
      </el-row>
      <el-row class="d-flex flex-row mt-3 m-0 p-0" style="height: 910px;">
        <el-col class="m-0 p-1 col-3">
          <div v-if="tree">
            <el-tree
              class="ml-3 font-weight-bold pt-5 pr-4"
              style="background:url(../../../static/image/portal/xzqhbk.png) no-repeat; height: 858px;width: 315px;padding-left: 25px;color: white;"
              :data="tree"
              :node-key="tree.leader"
              :default-expanded-keys="expandedKeys"
              :default-checked-keys="checkedKeys"
              :props="defaultProps"
              @node-click="handleNodeClick"
            />
          </div>
        </el-col>
        <!--        overflow-x: hidden;overflow-y: auto;-->
        <el-col class="col-9">
          <div style="height: 858px;width:110%;margin-left: -95px;overflow: hidden;">
            <!-- <el-table
               :data="tableData.slice((pageCurrent-1)*pageSize,pageCurrent*pageSize)"
            style="width: 100%">-->
            <ul
              class="d-flex flex-row m-1 ml-2"
              style="list-style:none;float:left;margin: 0px;padding: 0px;"
              v-for="(community,index) in community_list"
              :key="index"
            >
              <li style="width: 307px;height: 180px;margin-left: 10px;margin-top: 25px;">
                <!--placeID: "abc1234"
                placeName: "新丰苑二期"
                communityID: "111"
                communityName: "新丰苑"
                districtCode: 320200
                url: "www.baidu.com"-->
                <el-button
                  class="primary"
                  @click="show_community(community.url,community.placeID)"
                  style="width: 100%;height: 110%;background: url(../../../static/image/portal/xqbk.png) no-repeat;border: 0px;"
                >
                  <p class="txt">
                    {{community.placeName}}
                    <br />
                    <br />
                    <!--                    deviceCounts: 0-->
                    <!--                    dataCounts: 0-->
                    <span style="font-size: 13px;">
                      设备总数&nbsp;&nbsp;{{community.deviceCounts}}
                      <br />
                      设备信息总数&nbsp;&nbsp;{{community.dataCounts}}
                    </span>
                    <!-- {{community.placeName}}-->
                  </p>
                </el-button>
              </li>
            </ul>

            <!--   <div class="block">
                 <el-pagination
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="pageCurrent"
                   :page-sizes="[10,100, 200, 300, 400]"
                   :page-size="pageSize"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="community_list.length">
                 </el-pagination>
            </div>-->
          </div>
        </el-col>
        <!--        <el-col class="col-1"/>-->
      </el-row>
    </div>
  </div>
</template>

<style>
.el-tree-node.is-current > .el-tree-node__content {
  background-color: #b2dba1 !important;
  color: black;
}

.el-tree-node__content:hover {
  background-color: #b2dba1 !important;
  color: black;
}

.el-menu--horizontal > .el-menu-item:not(.is-disabled):hover {
  background: #b2dba1 !important;
  color: black;
}

.el-checkbox__input.is-checked + .el-checkbox__label {
  background-color: #b2dba1 !important;
  color: black;
}

.el-menu--horizontal > .el-submenu .el-submenu__title:hover {
  background-color: #b2dba1 !important;
  color: black;
}

.txt {
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: 18px;
}
</style>

<script>
import { GetTreeSelect, GetPlaces } from "@/api/portalApi";

import storage from "../../config/storage";
import { getCookie } from "../../config/cookie";

export default {
  name: "Portal",
  data() {
    //对象转换数组
    let treeList = [];
    //限制赋值第一次
    if (storage.get("treearr") == null) {
      treeList.push(storage.get("tree"));
      storage.set("treearr", treeList, 10);
    }

    return {
      tree: "",
      user: storage.get("user"),
      pageSize: 10,
      pageCurrent: 1,
      pageTotal: 100,
      expandedKeys: [1], //展开的菜单项
      checkedKeys: [9, 10], //选中的菜单项
      defaultProps: {
        children: "children",
        label: "label"
      },
      tableData: null,
      /*          [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '清明和园小区 1518 号'
                  }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '清明和园小区 1517 号'
                  }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '清明和园小区 1519 号'
                  }]*/
      community_list: null
    };
  },
  mounted() {
    this.getTreeList();
    /*if (!getCookie('username') || !getCookie('password')) {
        alert("请登录!");
        this.$router.push({path: "/system/dept/treeselect/login"});
      }*/
  },
  methods: {
    async getTreeList() {
      try {
        let tree = await GetTreeSelect();
        this.tree = tree;
        storage.set("treearr", tree, 10);
      } catch (error) {
        console.log(error);
      }
    },
    show_community(url, code) {
      // alert(address);
      //  地图跳转
      if (url) {
        window.open(maphost + url + "?" + "id" + "=" + code, "_parent");
      } else {
        alert("地图正在筹划！");
      }
    },
    async handleNodeClick(node, data, value) {
      //节点id
      if (node.leader) {
        //获取小区信息列表
        let param = new URLSearchParams();
        param.append("districtCode", node.leader);
        let Community_list = await GetPlaces(param);
        if (Community_list) {
          this.community_list = null;
          this.community_list = Community_list.list;
        } else {
          this.community_list = null;
        }
      }
    },
    handleSizeChange(size) {
      this.pageSize = size;
    },
    handleCurrentChange(curr) {
      this.pageCurrent = curr;
    },
    loginout() {
      this.$storage.remove("user");
      this.$storage.remove("tree");
      this.$router.push({ path: "/system/dept/treeselect/login" });
    }
  }
};
</script>

